<template>
  <div @setOptions="setOptions"></div>
</template>

<script>
import * as echarts from "echarts";
import eventBus from "@/utils/eventBus.js";

export default {
  methods: {
    setOptions({ title, item1, item2, color, ele }) {
      const option = {
        title: {
          text: title,
          left: "center",
          bottom: "-3%",
          textStyle: {
            color: "#333333",
            fontSize: 16,
          },
        },
        color: [color, "#EEF2F6"],
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ",
        },
        series: [
          {
            // name: "待支付订单",
            type: "pie",
            radius: ["54%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              // borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 1,
              // color: "#EEF2F6",
            },
            // emphasis: {
            //   itemStyle: {
            //     color: "#DDE3E8", //移入后的颜色
            //   },
            // },
            data: [
              {
                value: item1.val,
                name: item1.name,
                label: {
                  show: true,
                  position: "center",
                  formatter: "{c}",
                  fontSize: "40px",
                  textBorderWidth: 0,
                },
                itemStyle: {
                  // color: color,
                },
              },
              {
                value: item2.val,
                name: item2.name,
                label: {
                  show: false,
                },
                itemStyle: {
                  emphasis: {
                    color: "#DDE3E8", //移入后的颜色
                  },
                },
              },
            ],
          },
        ],
      };

      // const E = echarts.init(document.getElementsByClassName(ele)[0]);
      // E.setOption(option);

      // 解决提示：“There is a chart instance already initialized on the dom.”
      //检测是否已经存在echarts实例，如果不存在，则不再去初始化
      let myChart = echarts.getInstanceByDom(
        // this.$refs[this.chartObj.type]
        document.getElementsByClassName(ele)[0]
      );
      if (myChart == null) {
        myChart = echarts.init(document.getElementsByClassName(ele)[0]);
      }
      myChart.setOption(option);
    },
  },
  mounted() {
    eventBus.$on("touchSetOptions", this.setOptions);
  },
  beforeDestroy() {
    eventBus.$off("touchSetOptions");
  },
};
</script>
<style lang="less" scoped>
.PieShape {
  width: 30%;
  height: 100%;
}
</style>